<!-- 支付结算 -->
<template>
	<view class="payment-container">
		<view class="payment-padd">
			<!-- 顶部导航和步骤条 -->
			<view class="top-nav">
				<view class="cart-icon">
					<!-- <image src="/static/carousel04.png" mode="aspectFill"></image> -->
					<text class="iconfont icon-gouwuche icon-gouwucheColor"></text>
					<text>付款</text>
				</view>
				<view class="step-bar">
					<view class="step-item">1. 查看购物车</view>
					<view class="step-item">2. 填写订单</view>
					<view class="step-item active">3. 付款，完成购买</view>
				</view>
			</view>

			<view class="order-left">
				<!-- 订单信息区域 -->
				<view class="order-info">
					<view class="order-status">
						<!-- <image class="check-icon" src="/static/carousel04.png" mode="aspectFit"></image> -->
						<text class="iconfont icon-success iconfontClr"></text>
						<text>订单已提交，请选择支付方式</text>
					</view>
					<view class="order-details">
						<view class="detail-item">
							<text>订单编号：{{orderDataObj.order_no}}</text>
							<text>状态：{{orderDataObj.is_pay===0?'待付款':'已付款'}}</text>
						</view>
						<view class="detail-item">
							订单总价：<text class="fontCol">￥{{orderDataObj.pay_total_price}}</text>
						</view>
						<!-- <view class="detail-item countdown">
							<text class="iconfont icon-shizhong icon-img"></text>
							<text>剩余{{ countdownHours }}小时{{ countdownMinutes }}分{{ countdownSeconds }}秒</text>
							<text>请在2小时内完成支付，过期自动取消。</text>
						</view> -->
					</view>
				</view>

				<text class="payment-category">请选择支付方式</text>
				<!-- 支付方式选择区域 -->
				<view class="payment-methods">
					<view :class="['method-item',selectedPayment === 'alipay'?'method-selected':'']"
						@click="openPay('alipay')">
						<!-- <image class="method-icon" src="/static/carousel04.png" mode="aspectFit"></image> -->
						<text class="iconfont icon-zhifubao icon-zhifubaoColor"></text>
						<text>支付宝</text>
					</view>
					<view :class="['method-item',selectedPayment === 'wechat'?'method-selected':'']"
						@click="openPay('wxpay')">
						<!-- <image class="method-icon" src="/static/carousel04.png" mode="aspectFit"></image> -->
						<text class="iconfont icon-weixinzhifu icon-weixinzhifuColor"></text>
						<text>微信支付</text>
					</view>
					<view :class="['method-item',selectedPayment === 'bank'?'method-selected':'']"
						@click="selectPayment('bank')">
						<!-- <image class="method-icon" src="/static/carousel04.png" mode="aspectFit"></image> -->
						<text class="iconfont icon-yinhangqia icon-yinhangqiaColor"></text>
						<text>银行转账</text>
					</view>
				</view>
				<!-- <button class="pay-button" @click="goToPay" :disabled="!selectedPayment">去支付</button> -->
			</view>

			<!-- <view class="container">
				<view class="header">
					<text class="title">微信扫码支付</text>
					<view class="close" @click="closePage">×</view>
				</view>
				<view class="qr-code-container">
					<view class="content">
						<ikun-qrcode width="100" height="100" unit="rpx" :data="url" />
					</view>
				</view>
				<view class="amount-container">
					<text class="amount-text">支付 ¥{{ paymentAmount }}</text>
				</view>
				<button class="completed-button" type="primary" @click="showCompletedToast">已完成支付</button>
			</view> -->
			<view class="container">
				<view class="header">
					<text class="title">银行转账</text>
					<!-- <view class="close" @click="closePage">×</view> -->
				</view>
				<view class="info-item">
					<text class="label">开户名:</text>
					<text class="value">菏泽工术光电科技有限公司</text>
				</view>
				<view class="info-item">
					<text class="label">开户行:</text>
					<text class="value">兴业银行菏泽分行</text>
				</view>
				<view class="info-item">
					<text class="label">银行账户:</text>
					<text class="value fontCol">3778 1010 0100 1014 45</text>
				</view>
				<view class="info-item">
					<text class="label">纳税人识别号:</text>
					<text class="value fontCol">9137 1727 MA3T 0D6Q 5A</text>
				</view>
				<view class="info-item">
					<text class="label">地址:</text>
					<text class="value">山东省菏泽市定陶区汉源路与麟迹路交汇处</text>
				</view>
				<view class="info-item">
					<text class="label">电话:</text>
					<text class="value">17615518686</text>
				</view>
				<view class="note">发货时间以具体到账时间为准,联系电话：0530-2216166 / 19953067911</view>
				<view class="button-group">
					<button class="pay-button" @click="orderCancel">取消支付</button>
					<button class="pay-button" @click="showPaidToast">已付款</button>
					<!-- <button class="pay-button" @click="contactCustomerService">联系客服</button> -->
				</view>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog" class="uniP">
			<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="提示" content="确定取消支付吗？"
				@confirm="cancel" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<pay-result-popup class="resultClass" ref="payResultPopup"></pay-result-popup>
		<!--支付弹窗-->
		<uni-pay ref="pay" @success="paySuccess()"></uni-pay>

		<zmt-pay-success :buttons="paySuccessButton" :show="showPaySuccess" :showClose="true"
			@status="setPaySuccessStatus"></zmt-pay-success>

	</view>
</template>

<script>
	const order = uniCloud.importObject('order', {
		customUI: true
	});
	var db = uniCloud.database();
	export default {
		name: "payment",
		data() {
			return {
				showPaySuccess: false,
				order: {},
				selectedPayment: '', // 选中的支付方式 1、alipay 支付宝 2、wechat 微信 3、bank银行转账
				paySuccessButton: [],
				orderDataObj:{}
			};
		},
		props: {
			// orderDataObj: {
			// 	type: Object, // 数字类型
			// 	required: false, // 必填项
			// 	default: null // 默认值
			// },
			// orderPage: {
			// 	type: String, // 数字类型
			// 	required: false, // 必填项
			// 	default: '' // 默认值
			// },
		},
		mounted() {
			// orderData
			this.orderDataObj = uni.getStorageSync('orderData')
			var orderNo = this.orderDataObj.order_no;
			//根据订单号查询出对应的订单信息
			this.getOrderByOrderNo(orderNo);
		},
		methods: {
			//支付成功页面
			paySuccess() {
				this.showPaySuccess = true;
			},
			//设置成功组件状态
			setPaySuccessStatus(e) {
				this.showPaySuccess = e;
			},
			//根据订单号查询出订单信息
			getOrderByOrderNo(orderNo) {
				db.collection('order').where({
					order_no: orderNo
				}).get({
					getOne: true
				}).then(res => {
					this.order = res.result.data;
					console.log('res.result.data:', res.result.data)
				});
			},
			// 发起支付
			openPay(provider) {
				var order = this.order;
				// 检查组件是否存在
				if (!this.$refs.pay) {
					console.error('uni-pay组件未找到，请检查ref是否正确');
					return;
				}

				if (order.is_pay == 1) {
					uni.showToast({
						title: '订单已支付',
						icon: 'none'
					})
					return;
				}

				// 检查open方法是否存在
				if (typeof this.$refs.pay.open !== 'function') {
					console.error('uni-pay组件没有open方法，请确认组件版本或方法名');
					return;
				}

				var total_fee = (this.order.pay_total_price - 0).toFixed(2) * 100;
				var randomNum = Math.floor(Math.random() * 900) + 100;
				var out_trade_no = order.order_no + '-' + randomNum;
				// 调用支付方法（参数已在data中初始化，避免undefined）
				this.$refs.pay.open({
					"provider": provider,
					total_fee: total_fee, // 确保为数字类型
					order_no: order.order_no,
					out_trade_no: out_trade_no,
					description: '订单支付',
					type: 'order',
					custom: order
				});

				//轮询查询是否已支付
				this.getPayOrderResult(order.order_no);
			},

			//轮询查询结果
			getPayOrderResult(orderNo) {
				var that = this;
				var interval = setInterval(function() {
					order.getPayOrderStatus(orderNo).then(res => {
						if (res.result.data[0].status == 1) {
							clearInterval(interval);
							that.$refs.pay.closePopup('payPopup');
							that.showPaySuccess = true;
							that.paySuccessButton = [{
									text: '查看订单',
									page: '/pages/order/order?_id=' + that.orderDataObj.order_no,
									order_no: that.orderDataObj.order_no
								},
								{
									text: '返回首页',
									page: '/pages/index/index'
								}
							]
						}
					});
				}, 2000);
			},

			closePage() {
				// 这里可添加关闭页面逻辑，如返回上一页等
				uni.navigateBack();
			},
			showCompletedToast() {
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				});
			},

			showPaidToast() {
				this.$refs.payResultPopup.openPayResultPopup();
				// uni.showToast({
				// 	title: '已付款成功',
				// 	icon: 'success'
				// });
			},
			contactCustomerService() {
				// 这里可添加联系客服逻辑，如拨打电话、跳转到客服聊天页面等
				uni.showToast({
					title: '联系客服功能暂未实现',
					icon: 'none'
				});
			},


			selectPayment(method) {
				this.selectedPayment = method;
			},
			goToPay() {
				if (this.selectedPayment === 'wechat') {} else {
					// 这里可以添加其他支付方式的跳转逻辑，如调起支付宝或银行转账页面等
					uni.showToast({
						title: `跳转到${this.selectedPayment}支付`,
						icon: 'none'
					});
				}
			},
			orderCancel() { // 点击取消订单
				this.$refs.alertDialog.open()
			},
			cancel() {
				order.updateOrder(
					this.orderDataObj.order_no, {
						status: {
							code: 6,
							text: '已取消'
						}
					},
				).then((data) => {
					console.log('订单已取消:', data)
					uni.showToast({
						title: '订单已取消',
						icon: 'none'
					});
					uni.redirectTo({
						url: '/pages/order/order'
					});
					// this.$emit('ordercance', data) // 传递数据
				}).catch((e) => {
					uni.showToast({
						title: '订单已取消',
						icon: 'none'
					});
					console.log('订单取消失败', e.message)
				})
			},

			dialogClose() {
				// console.log('点击关闭')
			}

		}
	}
</script>

<style scoped>
	.payment-container {
		width: 100%;
		height: 100%;
		/* padding: 20px; */
		/* background-color: #fff; */
	}

	.payment-padd {
		/* width: 100%; */
		/* height: 100%; */
		margin: 60px;
		padding: 20px;
		box-sizing: border-box;
		background-color: #FFF;
	}

	.top-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.cart-icon {
		display: flex;
		align-items: center;
	}

	.cart-icon image {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	.step-bar {
		display: flex;
	}

	.step-item {
		padding: 5px 10px;
		background-color: #f0f0f0;
		border-radius: 5px;
		margin-right: 10px;
	}

	.active {
		background-color: #f54242;
		color: #fff;
	}

	.order-left {
		width: 50%;
		height: 500px;
		background-color: #FFF;
		padding-right: 20px;
		border-right: 1px dashed #ccc;
		display: inline-block;
		box-sizing: border-box;
		overflow: hidden;
	}

	.order-info {
		border: 1px dashed #ccc;
		padding: 20px;
		margin-bottom: 90px;
	}

	.order-status {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.iconfontClr {
		color: #18bc37;
	}

	.check-icon {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}

	.order-details {
		line-height: 1.6;
	}

	.detail-item {
		margin-bottom: 5px;
	}

	.detail-item text {
		margin-right: 5px;
	}

	.fontCol {
		color: #ff5000;
		font-size: 18px;
		font-weight: 600;
	}

	.countdown {
		color: #f54242;
	}

	.clock-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.payment-category {
		margin-bottom: 50px;
		display: inline-block;
	}

	.payment-methods {
		margin-bottom: 20px;
		display: flex;
		flex-wrap: wrap;

	}

	.method-item {
		margin-right: 10px;
		display: flex;
		align-items: center;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 10px;
		cursor: pointer;
		font-size: 14px;
	}

	.method-selected {
		border: 1px solid #f54242;
	}

	.method-icon {
		width: 40px;
		height: 40px;
		margin-right: 10px;
	}

	.selected-mark {
		width: 15px;
		height: 15px;
		border: 2px solid #f54242;
		border-radius: 50%;
		margin-left: auto;
	}

	/* .pay-button {
		width: 70px;
		height: 40px;
		line-height: 40px;
		background-color: #f54242;
		color: #fff;
		border-radius: 5px;
		font-size: 14px;
		margin-left: 0;
	} */

	.container {
		width: 50%;
		height: 500px;
		display: inline-block;
		padding: 40px;
		background-color: #fff;
		border-radius: 5px;
		/* box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); */
		box-sizing: border-box;
		overflow: hidden;

	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.close {
		font-size: 20px;
		cursor: pointer;
	}

	.qr-code-container {
		height: 240px;
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
		margin-top: 30px;
	}

	.content {
		width: 350px;
		height: 200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}


	.amount-container {
		display: flex;
		justify-content: center;
		margin-bottom: 20px;
	}

	.amount-text {
		color: #f4333c;
		font-size: 16px;
	}

	.completed-button {
		background-color: #f4333c;
		border-color: #f4333c;
	}



	.info-item {
		display: flex;
		margin-bottom: 15px;
	}

	.label {
		width: 108px;
		color: #666;
	}

	.value {
		flex: 1;
	}

	.note {
		color: #999;
		margin-bottom: 20px;
	}

	.button-group {
		display: flex;
		/* justify-content: space-around; */
	}

	.pay-button {
		/* background-color: #f4333c; */
		/* border-color: #f4333c; */
		margin: 0 10px;
		font-size: 14px;
	}

	.contact-button {
		background-color: #fff;
		border-color: #ccc;
		color: #333;
	}

	.icon-img {
		color: #FF9000;
		margin-right: 10px;
	}

	.icon-zhifubaoColor {
		color: #06B4FD;
		margin-right: 4px;
	}

	.icon-weixinzhifuColor {
		color: #15BA11;
		margin-right: 4px;
	}

	.icon-yinhangqiaColor {
		color: #F2CB51;
		margin-right: 4px;
	}

	.icon-gouwucheColor {
		margin-right: 4px;
	}

	.resultClass {
		position: fixed;
		top: 0;
		left: 0;
	}

	.uniP /deep/ .uni-dialog-button {
		cursor: pointer;
	}
</style>